import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { Form, TreeSelect, Row, Col, Select, Space, Button, message } from 'antd'
import moment from 'moment'
import style from './Statistic.module.less'
import NumberStatistic from '@components/FinanceStatistic/NumberStatistic'
import AmountStatistic from '@components/FinanceStatistic/AmountStatistic'
import { Context } from '@components/FinanceStatistic/context'

const { Item } = Form
const { Option } = Select
class FinanceStatistic extends Component {
  state = {
    causeaction: [],
    type: 'accept_datetime',
    searchVersion: Date.now(),
    yearOne: moment().year() - 2,
    yearTwo: moment().year() - 1,
    yearThree: moment().year(),
    treeData: []
  }

  formRef = React.createRef()

  search (d) {
    let { causeaction } = d
    if (causeaction.length > 10) {
      return message.warning('最多可以选择十个案由')
    }
    if (causeaction.length === 0) {
      causeaction = ['金融借款合同纠纷', '金融不良债权追偿纠纷', '融资租赁合同纠纷']
    }
    this.setState({
      causeaction: d.causeaction,
      type: d.type,
      searchVersion: Date.now()
    })
  }

  resetHandle () {
    const d = {
      causeaction: [],
      type: 'accept_datetime',
      searchVersion: Date.now()
    }
    this.setState(d)
    this.formRef.current.setFieldsValue(d)
  }

  // 获取案由
  getTreeData () {
    this.$get('/api/common/cause_action')
      .then(res => {
        if (res.status === 1 && res.data instanceof Array) {
          this.setState({ treeData: res.data })
        }
      })
  }

  componentDidMount () {
    this.getTreeData()
  }

  render () {
    const data = { causeaction: [], type: this.state.type }
    const initial = {
      yearOne: this.state.yearOne,
      yearTwo: this.state.yearTwo,
      yearThree: this.state.yearThree,
      changeYearOne: v => this.setState({ yearOne: v }),
      changeYearTwo: v => this.setState({ yearTwo: v }),
      changeYearThree: v => this.setState({ yearThree: v })
    }
    return (
      <div className={style.container}>
        <div className={style['search-box']}>
          <Form ref={this.formRef} labelCol={{ flex: '80px' }} initialValues={data} onFinish={d => this.search(d)}>
            <Item label='查询案由' name='causeaction'>
              <TreeSelect
                style={{ width: '100%' }}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                treeData={this.state.treeData}
                placeholder='请选择案由'
                multiple
                showSearch
              />
            </Item>
            <Row>
              <Col span={8}>
                <Item label='选择方式' name='type'>
                  <Select placeholder='请选择方式'>
                    <Option value='accept_datetime'>收案</Option>
                    <Option value='docket_datetime'>立案</Option>
                    <Option value='closure_datetime'>结案</Option>
                  </Select>
                </Item>
              </Col>
              <Col span={16} style={{ textAlign: 'right' }}>
                <Space>
                  <Button type='primary' ghost htmlType='submit'>查询</Button>
                  <Button onClick={() => this.resetHandle()}>重置</Button>
                </Space>
              </Col>
            </Row>
          </Form>
        </div>
        <div className={style.block}>
          <Context.Provider value={initial}>
            <NumberStatistic causeaction={this.state.causeaction} type={this.state.type} searchVersion={this.state.searchVersion} />
          </Context.Provider>
        </div>
        <div className={style.block}>
          <Context.Provider value={initial}>
            <AmountStatistic causeaction={this.state.causeaction} type={this.state.type} searchVersion={this.state.searchVersion} />
          </Context.Provider>
        </div>
      </div>
    )
  }
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {
  }
})

export default connect(mapState, mapDispatch)(FinanceStatistic)
